<template>
	<view>

		<view style="display: flex;flex-direction: row;justify-content: center;">
			<view class="colorback">我是PPT吗你以为？</view>
		</view>
		<view style="display: flex;flex-direction: row;justify-content: center;">
			<view class="imageback"><image src="../../static/images/di.jpg" mode="widthFix" style="width: 100%;"></image></view>
		</view>
		<view style="display: flex;flex-direction: row;justify-content: center;">
			<view class="backback">
				<view class="buttonback">按钮</view>
			</view>
		</view>
		<view style="display: flex;justify-content: center;">
			<view class="thing" @click="open">
				<view :class="isOpen?'zuo':'you'">

				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;justify-content: center;">
			<view style="width: 300rpx;height: 300rpx;">
				<view class="lifang">
					<image class="lilogo" src="/static/logo.png"></image>
					<image class="lilogo" src="/static/logo.png"></image>
					<image class="lilogo" src="/static/logo.png"></image>
					<image class="lilogo" src="/static/logo.png"></image>
				</view>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;justify-content: center;">
			<view class="contaner">
				<block v-for="(item,index) in dataArray" :key="index">
					<view :class="[classArray[index],'kuang']">
						<image class="logo" :src="item"></image>
					</view>
				</block>
			</view>
		</view>

		<view style="display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20rpx;">
			<view class="card">
				<view class="mian" hover-class="mainhover">
					<view class="zheng">
						<image src="../../static/images/mian.jpg" style="width: 100%;height: 240rpx;clip-path: polygon(0 0,100% 0,100% 90%,57% 90%, 50% 100% ,43% 90%,0 90%);"></image>
						<view style="width: 300rpx;height: 60rpx;bottom: 0;text-align: center;">
							<text style="color: #333333;width: 100%;font-size: 28rpx;height: 100%;">打开</text>
						</view>
					</view>
					<image class="fan" src="../../static/images/di.jpg" mode="aspectFill"></image>
				</view>
				<view class="li">
					<image src="../../static/images/di.jpg" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isOpen: true,
				dataArray: ['/static/logo.png', '/static/logo.png', '/static/logo.png', '/static/logo.png', '/static/logo.png'],
				classArray: ['transform0', 'transform30', 'transform60', 'transform90', 'transform120', 'transform180']
			}
		},
		methods: {
			open() {
				this.isOpen = !this.isOpen;
			}
		}
	}
</script>

<style>
	.colorback {
		font-size: 60rpx;
		line-height: 200rpx;
		text-align: center;
		color: rgba(0,0,0,0);
		width: 100%;
		height: 200rpx;
		background: linear-gradient(90deg, #954613, #954a93, #124578, #FF4578, #954613);
		background-clip: text;
		-webkit-background-clip: text;
		/* clip-path: circle(50rpx at 0% 50%); */
		/* -webkit-clip-path: circle(50rpx at 0% 50%); */
		/* animation: colormove 3s infinite; */
	}
	.imageback {
		font-size: 60rpx;
		line-height: 200rpx;
		text-align: center;
		color: rgba(0,0,0,0);
		width: 100%;
		height: 200rpx;
		background-clip: text;
		-webkit-background-clip: text;
		clip-path: circle(100rpx at 0% 50%);
		-webkit-clip-path: circle(100rpx at 0% 50%);
		animation: imagemove 3s infinite;
	}
	
	@-webkit-keyframes colormove{
		from{
			clip-path: circle(50rpx at 0% 50%);
			-webkit-clip-path: circle(50rpx at 0% 50%);
		}
		to{
			clip-path: circle(50rpx at 100% 50%);
			-webkit-clip-path: circle(50rpx at 100% 50%);
		}
	}
	
	@-webkit-keyframes imagemove{
		from{
			clip-path: circle(100rpx at 0% 50%);
			-webkit-clip-path: circle(100rpx at 0% 50%);
		}
		to{
			clip-path: circle(100rpx at 100% 50%);
			-webkit-clip-path: circle(100rpx at 100% 50%);
		}
	}

	.backback {
		padding: 5rpx;
		background: linear-gradient(90deg, #954613, #954a93, #124578, #FF4578, #954613);
		border-radius: 100rpx;
		background-size: 400%;
		animation: buttoncolor 10s linear infinite;
		filter: blur(1rpx);
	}

	.buttonback {
		color: #FFFFFF;
		background: linear-gradient(90deg, #954613, #954a93, #124578, #FF4578, #954613);
		background-size: 400%;
		width: 300rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 100rpx;
		animation: buttoncolor 10s linear infinite;
	}

	@keyframes buttoncolor {
		from {}

		to {
			background-position: -400% 0;
		}
	}

	.thing {
		width: 160rpx;
		height: 60rpx;
		background-color: #333333;
		border: #2C405A solid 1rpx;
		border-radius: 40rpx;
		position: relative;
	}

	.zuo {
		left: 0;
		position: absolute;
		background-color: #FFFFFF;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
		margin: 5rpx;
		transition: all 1s ease;
		-webkit-transition: all 1s ease;
	}

	.thing:hover .zuo {
		background-color: #FFFFFF;
		width: 60rpx;
		height: 50rpx;
		border-radius: 50rpx;
		margin: 5rpx;
		clip-path: polygon(0 0, 50% 0, 55% 10%, 100% 50%, 55% 90% 50% 100%, 0 100%);
	}

	.you {
		right: 0;
		position: absolute;
		background-color: #FFFFFF;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50rpx;
		margin: 5rpx;
		transition: all 1s ease;
		-webkit-transition: all 1s ease;
	}

	.thing:hover .you {
		background-color: #FFFFFF;
		width: 60rpx;
		height: 50rpx;
		border-radius: 50rpx;
		margin: 5rpx;
		clip-path: polygon(0 0, 50% 0, 55% 10%, 100% 50%, 55% 90% 50% 100%, 0 100%);
	}

	.lifang {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		/* perspective: 1000rpx; */
		animation: lifangzhuan 10s linear infinite;
		-webkit-animation: lifangzhuan 10s linear infinite;
	}

	@keyframes lifangzhuan {
		from {
			transform: rotateX(-10deg) rotateY(0deg);
			-webkit-transform: rotateX(-10deg) rotateY(0deg)
		}

		to {
			transform: rotateX(-10deg) rotateY(360deg);
			-webkit-transform: rotateX(-10deg) rotateY(360deg)
		}
	}

	.lilogo {
		height: 100%;
		width: 100%;
		position: absolute;
		transition: all 1s ease;
		/* 	transform-origin: center;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		perspective: 1000rpx; */
	}

	.lifang image:nth-child(1) {
		transform: translateZ(-100rpx) rotateX(0deg);
		-webkit-transform: translateZ(-100rpx) rotateX(0deg);
	}

	.lifang image:nth-child(2) {
		transform: translateZ(100rpx) rotateX(180deg) rotateZ(180deg);
		-webkit-transform: translateZ(100rpx) rotateX(180deg) rotateZ(180deg);
	}

	.lifang image:nth-child(3) {
		transform: translateX(-100rpx) rotateY(90deg);
		-webkit-transform: translateX(-100rpx) rotateY(90deg);
	}

	.lifang image:nth-child(4) {
		transform: translateX(100rpx) rotateY(90deg);
		-webkit-transform: translateX(100rpx) rotateY(90deg);
	}

	.lifang:hover image:nth-child(1) {
		transform: translateZ(200rpx) rotateX(0deg);
		-webkit-transform: translateZ(200rpx) rotateX(0deg);
	}

	.lifang:hover image:nth-child(2) {
		transform: translateZ(-200rpx) rotateX(180deg) rotateZ(180deg);
		-webkit-transform: translateZ(-200rpx) rotateX(180deg) rotateZ(180deg);
	}

	.lifang:hover image:nth-child(3) {
		transform: translateX(200rpx) rotateY(90deg);
		-webkit-transform: translateX(200rpx) rotateY(90deg);
	}

	.lifang:hover image:nth-child(4) {
		transform: translateX(-200rpx) rotateY(90deg);
		-webkit-transform: translateX(-200rpx) rotateY(90deg);
	}

	.card {
		width: 300rpx;
		height: 300rpx;
		position: relative;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		perspective: 1000rpx;
		transition: all 1s ease;
		-webkit-transition: all 1s ease;
	}

	.mian {
		width: 100%;
		height: 100%;
		position: absolute;
		transform-origin: left;
		-webkit-transform-origin: left;
		transition: all 1s ease;
		-webkit-transition: all 1s ease;
		z-index: 100;
		perspective: 1000rpx;
	}

	.mainhover {
		transform: rotateY(-180deg);
		transform-origin: left;
		-webkit-transform: rotateY(-180deg);
		-webkit-transform-origin: left;
	}

	.card:hover .mian {
		transform: rotateY(-180deg);
		transform-origin: left;
		-webkit-transform: rotateY-180deg);
		-webkit-transform-origin: left;

	}

	.card:hover {
		transform: translateX(150rpx);
	}

	.li {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 99;
	}

	.zheng {
		background-color: #808080;
		width: 100%;
		height: 100%;
		position: absolute;
		display: flex;
		flex-direction: column;
		z-index: 1;
	}

	.fan {
		background-color: #808080;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		perspective: 1000rpx;
	}

	.logo {
		height: 100%;
		width: 100%;
	}

	.contaner {
		width: 400rpx;
		height: 300rpx;
		/* background-color: #FFF; */
		position: relative;
		transform-style: preserve-3d;
		-webkit-transform-style: preserve-3d;
		perspective: 1000rpx;
	}

	.kuang {
		position: absolute;
		border: #333333 solid 1rpx;
		width: 50%;
		right: 0;
		height: 100%;
	}

	.transform0 {
		transform-origin: 0;
		transform: rotateY(360deg);
		-webkit-transform: rotateY(360deg);
		animation: logotransform0 10s linear infinite;
	}

	.transform30 {
		transform-origin: 0;
		transform: rotateY(330deg);
		-webkit-transform: rotateY(330deg);
		animation: logotransform30 10s linear infinite;
	}

	.transform60 {
		transform-origin: 0;
		transform: rotateY(300deg);
		-webkit-transform: rotateY(300deg);
		animation: logotransform60 10s linear infinite;
	}

	.transform90 {
		transform-origin: 0;
		transform: rotateY(270deg);
		-webkit-transform: rotateY(270deg);
		animation: logotransform90 10s linear infinite;
	}

	.transform120 {
		transform-origin: 0;
		transform: rotateY(240deg);
		-webkit-transform: rotateY(240deg);
		animation: logotransform120 10s linear infinite;
	}

	.transform150 {
		transform-origin: 0;
		transform: rotateY(210deg);
		-webkit-transform: rotateY(210deg);
		animation: logotransform150 10s linear infinite;
	}

	.transform180 {
		transform-origin: 0;
		transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);
		animation: logotransform180 10s linear infinite;
	}

	@keyframes logotransform0 {
		from {
			transform-origin: 0;
			transform: rotateY(360deg);
			-webkit-transform: rotateY(360deg);
		}

		to {
			transform-origin: 0;
			transform: rotateY(0deg);
			-webkit-transform: rotateY(0deg);
		}
	}

	@keyframes logotransform30 {
		from {
			transform-origin: 0;
			transform: rotateY(330deg);
			-webkit-transform: rotateY(330deg);
		}

		to {
			transform-origin: 0;
			transform: rotateY(-30deg);
			-webkit-transform: rotateY(-30deg);
		}
	}

	@keyframes logotransform60 {
		from {
			transform-origin: 0;
			transform: rotateY(300deg);
			-webkit-transform: rotateY(300deg);
		}

		to {
			transform-origin: 0;
			transform: rotateY(-60deg);
			-webkit-transform: rotateY(-60deg);
		}
	}

	@keyframes logotransform90 {
		from {
			transform-origin: 0;
			transform: rotateY(270deg);
			-webkit-transform: rotateY(270deg);
		}

		to {
			transform-origin: 0;
			transform: rotateY(-90deg);
			-webkit-transform: rotateY(-90deg);
		}
	}

	@keyframes logotransform120 {
		from {
			transform-origin: 0;
			transform: rotateY(240deg);
			-webkit-transform: rotateY(240deg);
		}

		to {
			transform-origin: 0;
			transform: rotateY(-120deg);
			-webkit-transform: rotateY(-120deg);
		}
	}

	@keyframes logotransform150 {
		from {
			transform-origin: 0;
			transform: rotateY(210deg);
			-webkit-transform: rotateY(210deg);
		}

		to {
			transform-origin: 0;
			transform: rotateY(-150deg);
			-webkit-transform: rotateY(-150deg);
		}
	}

	@keyframes logotransform180 {
		from {
			transform-origin: 0;
			transform: rotateY(180deg);
			-webkit-transform: rotateY(180deg);
		}

		to {
			transform-origin: 0;
			transform: rotateY(-180deg);
			-webkit-transform: rotateY(-180deg);
		}
	}
</style>
